<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="username"><span></span><br>
  <input type="text" class="password"><span></span><br>
  <input type="text" class="password2"><span></span><br>
  <input type="button" class="btn" value="提交">
</body>
<script>
  // ○ 用户名验证：数字字母下划线中划线中文，5~10位
  // ○ 密码验证：数字字母，6~10位
  // ○ 重复密码验证
  // ○ 手机号验证
  // ○ 要求：每个输入框，边输入边验证输入框内容，在当前输入框后显示提示语
  // ○ 要求：点击按钮，所有输入框全部正确，提示成功，否则，提示失败
  var un = document.querySelector(".username");
  var pw = document.querySelector(".password");
  var pw2 = document.querySelector(".password2");
  var btn = document.querySelector(".btn");

  // 用来记录每个输入框内容是否正确
  var u = false, p = false, p2 = false;

  un.oninput = function(){
    // 根据用户名的规则写出正则
    var reg = /^[\w\-\u2e80-\u9fff]{5,10}$/i;
    // 使用正则验证字符串，并根据验证结果，做出提示
    if( reg.test(this.value) ){
      this.nextSibling.innerText = "ok";
      u = true;
    }else{
      this.nextSibling.innerText = "no";
      u = false;
    }
  }

  pw.oninput = function(){
    // 根据用户名的规则写出正则
    var reg = /^[\da-z]{6,10}$/i;
    // 使用正则验证字符串，并根据验证结果，做出提示
    if( reg.test(this.value) ){
      this.nextSibling.innerText = "ok";
      p = true;
    }else{
      this.nextSibling.innerText = "no";
      p = false;
    }
    
    if(pw2.value === "") return;
    
    if( this.value === pw2.value ){
      pw2.nextSibling.innerText = "ok";
      p2 = true;
    }else{
      pw2.nextSibling.innerText = "no";
      p2 = false;
    }
  }

  pw2.oninput = function(){
    if( this.value === pw.value ){
      this.nextSibling.innerText = "ok";
      p2 = true;
    }else{
      this.nextSibling.innerText = "no";
      p2 = false;
    }
  }

  btn.onclick = function(){
    // 判断所有输入框记录的状态，是否全部为成功
    if( u && p && p2 ){
      alert("成功");
    }else{
      alert("？失败了");
    }
  }

  // 作业：当点击按钮时如果提交失败，提示谁失败了

</script>
</html>